<%--

Copyright 2010 mazhao.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
under the License.

    Document   : catalog
    Created on : Sep 24, 2010, 10:30:18 PM
    Author     : mazhao
--%>

<%@page contentType="text/html" pageEncoding="UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <title><s:text name="catalog.title"/></title>
    <script type="text/javascript">

        // ---- for jquery.debug.js plugin ----
        DEBUG = false;

        /**
         * add child class to form jquery tree table.
         * @performance
         */
        $(document).ready(function() {
            // current tr index.
            var curTrIndex = 0;
            // each tr find its parent
            $("table#catalogTable tbody tr").each(function() {
                curTrIndex++;
                // current node's lft and rgt
                var lft = parseInt($(this).children(":nth-child(4)").html());
                var rgt = parseInt($(this).children(":nth-child(5)").html());

                var parentId = "-";

                // search each node above
                var subTrIndex = 0;
                $("table#catalogTable tbody tr").each(function() {
                    subTrIndex ++;
                    // only node above
                    if (subTrIndex > curTrIndex) {
                        return;
                    }
                    var subLft = parseInt($(this).children(":nth-child(4)").html());
                    var subRgt = parseInt($(this).children(":nth-child(5)").html());

                    $.log("lft:" + lft + " rgt:" + rgt + " subLft:" + subLft + " subRgt:" + subRgt);
                    $.log("subLft < lft && subRgt > rgt =" + (subLft < lft && subRgt > rgt));
                    // if in then find one ancesster
                    if (subLft < lft && subRgt > rgt) {
                        parentId = $(this).attr("id");
                        $.log(" find parent id:" + parentId);
                    }
                });
                // if find add class
                if (parentId != "-") {
                    $.log("add class!")
                    $(this).addClass("child-of-" + parentId);
                }
            });
        });

        // ------------ initialize tree table ------------

        $(document).ready(function() {
            $("table#catalogTable").treeTable({
                expandable : true,
                clickableNodeNames : true,
                initialState : "expanded"
            });

            $("table#catalogTable tbody tr").mousedown(function() {
                $("tr.selected").removeClass("selected");
                $(this).addClass("selected");
                loadForm();
            });
        });

        // ------------ load current selected row to catalog form ------------

        function loadForm() {
            $.log("load form");
            $.log("         id:" + $("tr.selected").children(":nth-child(3)").html());
            $.log("       name:" + $("tr.selected").children(":nth-child(1)").html());
            $.log("description:" + $("tr.selected").children(":nth-child(2)").html());

            $("#catalogForm_id").val($("tr.selected").children(":nth-child(3)").html());
            loadFormNameAndDesc();
        }

        // change form action when change operation type
        $(document).ready(function() {
            $("#catalogForm_operationTypeupdate").click(function() {
                $("#catalogForm").attr("action", "<%= request.getContextPath()%>/management/catalogupdate.action");
                loadFormNameAndDesc();
            });

            $("#catalogForm_operationTypecreate").click(function() {
                $("#catalogForm").attr("action", "<%= request.getContextPath()%>/management/catalogcreate.action");
                $("#catalogForm_name").val("");
                $("#catalogForm_description").val("");
            });

            $("#catalogForm_operationTypedelete").click(function() {
                $("#catalogForm").attr("action", "<%= request.getContextPath()%>/management/catalogdelete.action");
                loadFormNameAndDesc();
            });
        });

        function loadFormNameAndDesc() {
            $("#catalogForm_name").val($("tr.selected").children(":nth-child(1)").text());
            $("#catalogForm_description").val($("tr.selected").children(":nth-child(2)").text());
        }
    </script>
</head>
<body>
<h3><s:text name="catalog.title"/></h3>
<div id="catalogList" style="width: 768px">
    <table id="catalogTable" align="left">
        <thead>
        <tr>
            <td><s:text name="catalog.name"/></td>
            <td><s:text name="catalog.description"/></td>
            <td><s:text name="catalog.id"/></td>
            <td><s:text name="catalog.lft"/></td>
            <td><s:text name="catalog.rgt"/></td>
        </tr>
        </thead>
        <tbody>
        <s:iterator var="catalog" value="allCatalog">
            <tr id="node-<s:property value="id"/>">
                <td><s:property value="name"/></td>
                <td><s:property value="description"/></td>
                <td><s:property value="id"/></td>
                <td><s:property value="lft"/></td>
                <td><s:property value="rgt"/></td>
            </tr>
        </s:iterator>
        </tbody>
    </table>
</div>

<div id="catalogOperation" style="width: 768px">
    <s:form action="catalogupdate" namespace="/management" id="catalogForm" cssStyle="margin-left:0px;">
        <s:textfield name="id" key="catalog.id" readonly="true"/>
        <s:textfield name="name" key="catalog.name"/>
        <s:textfield name="description" key="catalog.description"/>
        <s:radio name="operationType" list="operationTypes" key="catalog.operation_type"/>
        <s:submit key="catalog.submit"/>
    </s:form>
</div>
</body>
</html>
